import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import store from '../store/index'
Vue.use(VueRouter)

const routes = [{
        path: '/',
        redirect: '/home'
    },
    {
        path: '/home',
        name: 'Home',
        component: Home,
        redirect: '/homePage',
        children: [{
                path: '/homePage',
                name: 'homePage',
                component: () => import( /* webpackChunkName: "homePage" */ '../components/homePage/homePage.vue')
            },
            // 全部商品
            {
                path: '/allProducts',
                name: 'allProducts',
                component: () => import( /* webpackChunkName: "allProducts" */ '../components/homePage/AllProducts.vue')
            },
            // 关于我们
            {
                path: '/aboutUs',
                name: 'aboutUs',
                component: () => import( /* webpackChunkName: "aboutUs" */ '../components/homePage/AboutUs.vue')
            },
            // 详情页
            {
                path: '/details',
                name: 'Details',
                component: () => import( /* webpackChunkName: "Details" */ '../components/Details.vue')
            },
            // 收藏
            {
                path: '/collect',
                name: 'Collect',
                component: () => import( /* webpackChunkName: "Collect" */ '../components/homePage/Collect.vue')
            },
            // 订单
            {
                path: '/order',
                name: 'Order',
                component: () => import( /* webpackChunkName: "Order" */ '../components/homePage/Order.vue')
            },
            // 购物车
            {
                path: '/shoppingCart',
                name: 'ShoppingCart',
                component: () => import( /* webpackChunkName: "ShoppingCart" */ '../components/homePage/ShoppingCart.vue')
            },
            // 确认订单
            {
                path: '/confirmOrder',
                name: 'confirmOrder',
                component: () => import( /* webpackChunkName: "confirmOrder" */ '../components/homePage/confirmOrder.vue')
            },
        ]
    },
    // 登录页
    {
        path: '/login',
        name: 'login',
        component: () => import( /* webpackChunkName: "login" */ '../views/Login.vue')
    },
    // 注册页
    {
        path: '/register',
        name: 'register',
        component: () => import( /* webpackChunkName: "register" */ '../views/Register.vue')
    },
    // 报错信息
    {
        path: '/myerror',
        name: 'MyError',
        component: () => import( /* webpackChunkName: "MyError" */ '../components/MyError.vue')
    },

]

const router = new VueRouter({
    routes
})

// 路由守卫
router.beforeEach((to, from, next) => {
    if (/(collect|shoppingCart|order)$/.test(to.path)) {
        if (store.state.user == '') {
            next(false)
        } else {
            next()
        }
    } else {
        next()
    }
})

//控制台会报[NavigationDuplicated {_name: "NavigationDuplicated", name: "NavigationDuplicated"}]。其原因在于Vue-router在3.1之后把$router.push()方法改为了Promise。所以假如没有回调函数，错误信息就会交给全局的路由错误处理，因此就会报上述的错误。
//禁止全局路由错误处理打印，这个也是vue-router开发者给出的解决方案：
const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location, onResolve, onReject) {
    if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
    return originalPush.call(this, location).catch(err => err)
};

export default router